<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { getContentListApi } from '../../apis/apis.js'
import ContentList from '../components/ContentList.vue';

// 属于前端分类的文章
const frontContentList = ref([])
// 当前页
const current = ref(1)
// 记录条数
const total = ref(10)
// 骨架屏
const loading = ref(true)
// 查询后端, 返回一页的主页contentList
const pageChange = (num) => {
  getInfo(num)
}
// 获取文章详细信息
const getInfo = async (num) => {
  const res = await getContentListApi(num, '前端')
  frontContentList.value = res.data?.pageList
}
onMounted(() => {
  getInfo(current.value)
  setTimeout(() => {
    loading.value = false
  }, 200);
})

</script>

<template>
  <ContentList
    @pageChange="pageChange"
    :total="total"
    :loading="loading"
    :contentList="frontContentList"
  ></ContentList>
</template>

<style
  scoped
  lang='scss'
></style>